<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>box-shadow</title>
	<style>
		body {
			padding: 0;
			margin: 0;
			font-family: 'Microsoft yahei'
		}

		.effect {
			position: relative;
			height: 200px;
			background: #fff;
			margin: 20px auto;
			width: 70%;
			/*width: 600px;
			height: 200px;
			border: 1px solid #ddd;
			margin: 20px auto;*/
			box-shadow: 0px 1px 4px rgba(0,0,0,.3),0 0 40px rgba(0,0,0,.1) inset;
		}

		.effect h1 {
			/*top: 80px;*/
			font-size: 30px;
			text-align: center;
			line-height: 200px;
			/*position: relative;*/
		}

		.effect:after,.effect:before {
			content: '';
			position: absolute;
			box-shadow: 0px 0px 20px rgba(0,0,0,.8);
			border-radius: 100px/10px;
			z-index: -1;
			top: 50%;
			bottom: 0px;
			left: 10px;
			right: 10px;
			
		}


		.box1 {
			-webkit-transform: skew(12deg) rotate(4deg); 
			background: #efefef;
			width: 100px;
			height: 200px;
			margin: 10px auto;
		}
	</style>
</head>
<body>
	<div class="container effect">
		<h1>天行健，君子以自强不息！</h1>
	</div>

	<div class="box1"></div>
</body>
</html>